<template>
  <div>
    <div class="button-wrapper">
      <el-button type="myBlue" @click="addTeam">新增设计团队</el-button>
      <el-button type="myBlue" @click="notShowSelected">隐藏选中</el-button>
      <el-button type="myBlue" @click="showSelected">展示选中</el-button>
      <el-button type="success" @click="refresh">刷新</el-button>
    </div>
    <el-table class="admin-info-table"
              height="300"
              :data="tableData"
              stripe
              @selection-change="handleSelectionChange"
              style="width: 100%;">
      <el-table-column width="55" type="selection"/>
      <el-table-column align="center" width="160" label="中文名" prop="teamChName"/>
      <el-table-column align="center" width="160" label="英文名" prop="teamEnName"/>
      <el-table-column align="center" width="100" label="图片">
        <template slot-scope="scope">
          <div class="photo">
            <img :src="'/api/img/team/' + scope.row.teamId + '.png'">
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120" label="领域" prop="domain.domainName"/>
      <el-table-column align="center" label="方向">
        <template slot-scope="scope">
          <span v-if="scope.row.directions.length">
            <span v-for="(direction,index) in scope.row.directions" :key="direction.directionId">
              <span v-if="index!==scope.row.directions.length-1" :title="direction.directionName"
                    v-text="direction.directionName+'、'"/>
              <span v-else :title="direction.directionName" v-text="direction.directionName"/>
            </span>
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120" label="收藏量" prop="favorsNum"/>
      <el-table-column align="center" width="120" label="浏览量" prop="visitsNum"/>
      <el-table-column align="center" label="是否展示">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.display" active-text="展示" inactive-text="隐藏" @change="toggleShowTeam(scope.row)"/>
        </template>
      </el-table-column>

      <el-table-column align="center" width="260">
        <template slot="header" slot-scope="scope">
          <el-input v-model="searchContent" size="mini" placeholder="输入关键字搜索" @input="change(scope.$index, scope.row)"/>
        </template>
        <template slot-scope="scope">
          <el-button @click="handleLook(scope.row)">查看</el-button>
          <el-button type="myBlue" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
      <el-pagination
          :current-page="form.pageIndex + 1"
          :page-size="form.pageSize"
          :page-sizes="[5, 10, 20, 50, 100, 500]"
          :total="total"
          background
          layout="prev, pager, next, sizes, total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "TeamInfoManage",
  data() {
    return {
      tableData: [
        {
          contact: "",
          city: "",
          country: "",
          directions: [{directionId: -1, directionName: ""}],
          domain: "",
          otherProject: {
            name: "",
            remarks: "",
            urls: "",
            urlType: "smb",
          },
          favorite: !1,
          favorsNum: 0,
          inChina: "",
          introduction: "",
          internalProject: {
            name: "",
            remarks: "",
            urls: "",
            urlType: "smb",
          },
          province: "",
          teamChName: "",
          teamEnName: "",
          teamId: 0,
          contactPerson: "",
          visitsNum: 0,
          website: "",
          works: "",
        },
      ],
      total: 0,
      form: {
        categoryId: -1,
        directionId: [],
        domainId: -1,
        keyWord: "",
        pageIndex: 0,
        pageSize: 10,
        showHidden: !0,
      },
      searchContent: "",
      multipleSelection: [],
    };
  },
  methods: {
    handleSelectionChange(t) {
      this.multipleSelection = t;
    },
    addTeam() {
      const t = "./#/Team/Info?editMode=new&id=-1";
      window.open(t, "_blank");
    },
    importTeam() {
    },
    showSelected() {
      for (const item of this.multipleSelection) {
        const payload = {teamId: item.teamId, hidden: false};
        this.$http.post("api/team/setHidden", payload).then(res=> {
          if(200 === res.data.code){
            item.hidden = false
            item.display = true
          }
        });
      }

    },
    notShowSelected() {
      for (const item of this.multipleSelection) {
        const payload = {teamId: item.teamId, hidden: true};
        this.$http.post("api/team/setHidden", payload).then(res=> {
          if(200 === res.data.code){
            item.hidden = true
            item.display = false
          }
        });
      }
    },
    toggleShowTeam(item) {
      const payload = {teamId: item.teamId, hidden: !item.display};
      this.$http.post("api/team/setHidden", payload).then(res=> {
        if(200 === res.data.code){
          item.hidden = !item.hidden
        }
      })
    },
    change() {
      console.log("change")
      this.form.keyWord = this.searchContent
      this.form.pageIndex = 0
      this.search()
    },
    handleLook(t) {
      const url = "./#/Team/Info?id=" + t.teamId;
      window.open(url, "_blank");
    },
    handleEdit(t, e) {
      const url = "./#/Team/Info?editMode=edit&id=" + e.teamId;
      window.open(url, "_blank");
    },
    handleDelete(t, e) {
      var a = this;
      this.$confirm(
          "此操作将永久删除该设计团队（" + e.teamChName + "）, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      )
          .then(function () {
            a.$http
                .get("api/team/delete?teamId=" + e.teamId)
                .then(function (t) {
                  200 === t.data.code &&
                  (a.search(),
                      a.$message({type: "success", message: "删除成功!"}));
                });
          })
          .catch(function () {
            a.$message({type: "info", message: "已取消删除"});
          });
    },
    handleSizeChange(t) {
      (this.form.pageSize = t), this.search();
    },
    handleCurrentChange(t) {
      (this.form.pageIndex = t - 1), this.search();
    },
    search() {
      var t = this;
      this.$http.post("/api/team/search", this.form).then(function (e) {
        200 === e.data.code &&
        ((t.tableData = e.data.data), (t.total = e.data.total));
      });
    },
    refresh() {
      (this.form = {
        categoryId: -1,
        directionId: [],
        domainId: -1,
        keyWord: "",
        pageIndex: 0,
        pageSize: 10,
        showHidden: !0,
      }),
          (this.searchContent = ""),
          this.search();
    },
  },
  created() {
    this.search();
  },
}
</script>

<style scoped>
.button-wrapper {
  margin: 15px;
}

.photo {
  width: 64px;
  height: 64px;
  background-color: #eee;
  position: relative;
  margin: 10px;
}

.photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pagination-wrapper {
  float: right;
  padding-top: 4px;
}
</style>
